<!-- 商家端-功能大全-卡券管理 -->
<template>
	<view>
		<view class="top">
			<view class="title">
				新增优惠券
			</view>
			<button @click="toAdd">
				+新增
			</button>
		</view>
		<uni-segmented-control class="switch" :current="current" :values="items" @clickItem="onClickItem"
			styleType="button" activeColor="#1D6FFF"></uni-segmented-control>
		<view class="bottom">
			<view class="content" v-for="(item,index) in coupons" :key="index">
				<view v-show="current === 0" v-if="item.status==0" class="cards">
					<view class="card">
						<view class="left" v-if="item.type==1">
							<view class="left_top">
								满{{item.triggerMoney}}减
							</view>
							<view class="left_bottom">
								{{item.preferentialMoney}}
							</view>
						</view>
						<view class="left" v-else="item.type==2">
							<view class="left_top">
								折扣
							</view>
							<view class="left_bottom">
								{{item.discount}}
							</view>
						</view>
						<view class="line"></view>
						<view class="right">
							<view class="right_one">
								优惠券名称：{{item.name}}
							</view>
							<view class="right_two">
								有效期：{{item.start}}-{{item.end}}
							</view>
							<view class="right_three">
								每人限领1张
							</view>
						</view>
					</view>
				</view>
				<view v-show="current === 1" v-if="item.status==1" class="cards">
				<view class="card_timeout">
					<view class="left" v-if="item.type==1">
						<view class="left_top">
							满{{item.triggerMoney}}减
						</view>
						<view class="left_bottom">
							{{item.preferentialMoney}}
						</view>
					</view>
					<view class="left" v-else="item.type==2">
						<view class="left_top">
							折扣
						</view>
						<view class="left_bottom">
							{{item.discount}}
						</view>
					</view>
					<view class="line"></view>
					<view class="right">
						<view class="right_one">
							优惠券名称：{{item.name}}
						</view>
						<view class="right_two">
							有效期：{{item.start}}-{{item.end}}
						</view>
						<view class="right_three">
							每人限领1张
						</view>
					</view>
				</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				items: ['进行中', '已结束'],
				current: 0,
				coupons: []
			}
		},
		onLoad(){
			this.getcoupons()
		},
		methods: {
			getcoupons(){
				uni.request({
					url: 'http://localhost/dev-api/auth/login',
					method: 'POST',
					data: {
						username:"马六",
						password:"123456"
					},
					success(res) {
						if(res.data.code == 200){
							uni.setStorageSync('token',res.data.data.access_token)
						}
					}
				}),
				uni.request({
					url: "http://localhost:8080/coupon/coupon_admin/list",
					header: {
						'Authorization': 'Bearer ' + uni.getStorageSync('token')
					},
					method: 'GET',
					success: (resp => {
						this.coupons = resp.data.rows;
						console.log(resp);
					})
				})
			},
			toAdd(e) {
				uni.navigateTo({
					url: "/pages/index/coupons/issueCoupons/issueCoupons"
				})
			},
			onClickItem(e) {
				if (this.current != e.currentIndex) {
					this.current = e.currentIndex;
				}
			}
		}
	}
</script>

<style>
	page {
		background-color: #fff;
	}
	.cards{
		display: flex;
		flex-direction:column;
		width:700rpx ;
		align-items: center;
		margin-bottom: 30rpx;
	}

	.top {
		margin-top: 30rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		border: 3rpx solid #CECECE;
	}

	.bottom {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		font-weight: 600;
		margin-left: 176rpx;
		color: #1D6FFF;
	}

	button {
		width: 234rpx;
		height: 68rpx;
		display: flex;
		align-items: center;
		font-size: 26rpx;
		font-weight: 600;
		padding-left: 80rpx;
		margin: 52rpx 38rpx 46rpx 100rpx;
		background-color: #fff;
	}

	.content {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.switch {
		border: 1rpx solid #1D6FFF;
		border-radius: 20rpx;
		margin: 70rpx 70rpx 50rpx;
		width: 600rpx;
		display: flex;
		justify-content: space-between;
	}

	.card {
		display: flex;
		flex-direction: row;
		background-color: #1D6FFF;
		width: 690rpx;
		height: 200rpx;
		border-radius: 13rpx;
	}

	.card_timeout {
		display: flex;
		flex-direction: row;
		background-color: #89B0EC;
		width: 690rpx;
		height: 200rpx;
		border-radius: 13rpx;
	}

	.line {
		border-left: 2rpx solid #CECECE;
		height: 130rpx;
		width: 2rpx;
		margin-left: 60rpx;
		margin-top: 40rpx;
	}

	.left_top {
		margin-left: 68rpx;
		margin-top: 22rpx;
		font-size: 30rpx;
		font-weight: 500;
		color: aliceblue;
	}

	.left_bottom {
		margin-top: 30rpx;
		margin-left: 68rpx;
		font-size: 85rpx;
		color: aliceblue;
		font-weight: 550;
	}

	.right {
		margin-left: 50rpx;
		margin-top: 34rpx;
	}

	.right_one {
		color: #CAD4F2;
		font-size: 24rpx;
	}

	.right_two {
		color: #CAD4F2;
		font-size: 24rpx;
	}

	.right_three {
		color: #e5f3fa;
		font-size: 24rpx;
		font-weight: 600;
	}
</style>